<template>
<!-- 发布评论模块 -->
   <div class="comment-post">
      <van-field
         class="post-field"
         v-model.trim="message"
         rows="2"
         autosize
         type="textarea"
         maxlength="50"
         placeholder="请输入留言"
         show-word-limit
      />
      <!-- disabled 后边是 true 就是禁用掉的，如果是 false 就是不禁用 -->
      <van-button
         class="post-btn"
         @click="onPost"
         :disabled="!message.length"
         >发布</van-button
      >
   </div>
</template>

<script>
import { addComment } from '../../../api/comment'
export default {
   name: 'CommentPost',
   components: {},
   inject: {
      articleId: {
         type: [Number, String, Object],
         default: null
      }
   },
   props: {
      target: {
         type: [Number, String, Object],
         required: true
      }
   },
   data() {
      return {
         message: ''
      }
   },
   computed: {},
   watch: {},
   created() {},
   mounted() {},
   methods: {
      async onPost() {
         this.$toast.loading({
            message: '发布中...',
            forbidClick: true, // 禁用点击提示背景以外的东西
            duration: 0 // 持续时间，默认 两秒，如果为 0 则持续展示
         })
         try {
            const { data } = await addComment({
               // 评论的目标id（评论文章即为文章id，对评论进行回复则为评论id）
               // 防止超出安全整数范围
               target: this.target.toString(),
               // 评论的内容
               content: this.message,
               // 文章id，对评论内容发表回复时，需要传递此参数，
               // 表明所属文章id。对文章进行评论，不要传此参数。
               // 不用传
               // 有效 toString 无效 null
               art_id: this.articleId
                  ? this.articleId.toString()
                  : this.articleId
            })
            // console.log(data)
            // 关闭弹出层
            // 将发布内容显示列表顶部
            // 上边两步去父组件执行
            // 清空文本框
            this.message = ''
            this.$emit('post-success', data.data)
            this.$toast.success('发布成功')
         } catch (err) {
            this.$toast.fail('发布失败')
         }
      }
   }
}
</script>

<style scoped lang="less">
.comment-post {
   display: flex;
   align-items: center;
   padding: 32px 0 32px 32px;
   .post-field {
      background-color: #f5f7f9;
   }
   .post-btn {
      width: 150px;
      border: none;
      padding: 0;
      color: #6ba3d8;
      &::before {
         display: none;
      }
   }
}
</style>
